<template>
  <div class="product-item">
    <div class="box w-[96%] mx-auto p-1 transition-all duration-50">
      <div class="border-rounded-xl overflow-hidden pos-relative themb">
        <router-link :to="'/product/detail/' + item.id">
          <el-image
            :src="item.thumbnail"
            style="max-width: 100%; height: 100%"
            lazy
            @error="handleError"
        /></router-link>
      </div>
      <div class="pos-relative" style="z-index: 25">
        <div class="pos-relative">
          <div class="py-2">
            <router-link to="/">
              <h5 class="text-3.9 font-medium text-gray-700 text-ellipsis-2">
                {{ item.name }}
              </h5>
            </router-link>
          </div>
          <div class="tags">
            <span></span>
          </div>
          <div class="flex items-baseline justify-between py-1">
            <div class="flex items-baseline">
              <Price :price="item.price" />
              <span v-if="true" class="ml-1 text-3 text-gray-600">到手价</span>
              <span v-else>销量<i>10万+</i></span>
            </div>
            <div class="" style="">
              <span
                style="width: 25px; height: 25px"
                class="bg-red-100 flex items-center justify-center border-rounded-2xl cursor-pointer hover:bg-red-200"
              >
                <el-icon color="red"><Plus /> </el-icon>
              </span>
            </div>
          </div>
          <div class="flex justify-between items-center" v-if="showSaleNum"> 
            <span class="text-gray-500 text-3.5">
              已售{{ item.soldNum }}+
            </span>
          </div>
          <div class="flex items-center py-2 border-t operation" v-if="showOper" style="line-height: 1">
            <div class="flex items-center cursor-pointer mr-2">
              <el-icon><AlarmClock /></el-icon>
              <span class="text-3.5 ml-1">关注</span>
            </div>
            <div class="flex items-center cursor-pointer">
              <el-icon><Goods /></el-icon>
              <span class="text-3.5 ml-1">对比</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {Plus, Refresh,Goods,AlarmClock} from "@element-plus/icons-vue";
import Price from "@/components/common/Price.vue"; 

const props = defineProps<{
  item: any;
  showSaleNum?: boolean;
  showOper?: boolean;
}>();

const handleError = (e: any) => {
  e.target.src =
    "https://img11.360buyimg.com/jdcms/s240x240_jfs/t20260821/330386/24/1628/535566/68a61250F3d200c27/de3d9595b680080d.png.avif";
};
</script>
<style scoped lang="scss">
.product-item {
  overflow: hidden;
  .box {
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid rgb(255, 255, 255);
      border-radius: 10px;
      z-index: 21;
    }
    .themb {
      z-index: 22;
    }
    &:hover {
      border-color: #ff4d4f;
      transform: scale(1.05);
      overflow: visible;
      z-index: 23;
      &:before {
        height: 100%;
        border: 1px solid rgb(248, 0, 0);
        background-color: #fff;
        z-index: 22;
      }
      .themb {
        z-index: 23;
      }
    }
  }
  .operation {
    display: none;
  }
  &:hover {
    overflow: visible;
    .operation {
      display: flex;
    }
  }
}
</style>
